<template>
  <div class="management-container" style="min-height: 100vh;opacity: 0.88;">
    <h1 class="main-title">订单管理</h1>
    <el-menu :default-active="activeTab" mode="horizontal" @select="handleTabClick" class="menu-bar">
      <el-menu-item index="refund-management">订单退款管理</el-menu-item>
      <el-menu-item index="review-management">订单评论审核</el-menu-item>
    </el-menu>

    <div v-show="activeTab === 'refund-management'" class="content-section">
      <h2 class="section-title">退款管理</h2>
      <div v-for="order in refundOrders" :key="order.id" class="order-card">
        <p>订单号: {{ order.id }}</p>
        <p>买方: {{ order.username }}</p>
        <p>总金额: ¥{{ order.totalAmount }}</p>
        <p>退款原因: {{ order.reason }}</p>
        <div class="button-group">
          <el-button type="success" @click="handleRefund(order.id, '退款成功')">允许退款</el-button>
          <el-button type="danger" @click="handleRefund(order.id, '已支付')">拒绝退款</el-button>
        </div>
      </div>
    </div>

    <div v-show="activeTab === 'review-management'" class="content-section">
      <h2 class="section-title">评论审核</h2>
      <div v-for="review in pendingReviews" :key="review.id" class="review-card">
        <p>订单ID: {{ review.orderId }}</p>
        <p>商品ID: {{ review.productId }}</p>
        <p>评论: {{ review.review }}</p>
        <p>用户名: {{ review.username }}</p>
        <el-button type="primary" @click="approveReview(review.id)">公开此评论</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      refundOrders: [],
      pendingReviews: [],
      activeTab: 'refund-management'
    };
  },
  created() {
    this.fetchRefundOrders();
    this.fetchPendingReviews();
  },
  methods: {
    fetchRefundOrders() {
      axios.get('http://localhost:8080/api/orders/refund-requests')
        .then(response => {
          this.refundOrders = response.data;
        })
        .catch(error => {
          console.error("Error fetching refund orders:", error);
        });
    },
    fetchPendingReviews() {
      axios.get('http://localhost:8080/api/orders/reviews/pending')
        .then(response => {
          this.pendingReviews = response.data;
        })
        .catch(error => {
          console.error("Error fetching pending reviews:", error);
        });
    },
    handleRefund(orderId, status) {
      axios.post('http://localhost:8080/api/orders/updateStatus', { orderId, status })
        .then(() => {
          this.fetchRefundOrders();
          axios.post('http://localhost:8080/api/orders/updateProductInventory', { orderId })
                        .then(() => {
                            console.log("库存更新成功");
                        })
                        .catch(error => {
                            console.error("更新库存时出错:", error);
                        });
        })
        .catch(error => {
          console.error("Error updating order status:", error);
        });
    },
    approveReview(reviewId) {
      axios.post('http://localhost:8080/api/orders/reviews/update', { reviewId, iflegal: true })
        .then(() => {
          this.fetchPendingReviews();
        })
        .catch(error => {
          console.error("Error updating review status:", error);
        });
    },
    handleTabClick(tab) {
      this.activeTab = tab;
    }
  }
};
</script>

<style scoped>
.management-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 100vh;
  opacity: 0.88;
}

.main-title {
  text-align: center;
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.menu-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.content-section {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 20px;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.order-card, .review-card {
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 8px;
  background-color: #f5f5f5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.order-card p, .review-card p {
  margin: 5px 0;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  justify-content: flex-end;
}
</style>